<template>
  <!--分页条-->
		<div class="fenye">
			<div class="fenye-list">
						<ul>
							<li><a href="#" class="shangy"><span class="shang tubiao"></span></a></li>
							<li><a href="#"  class="fenye-selected">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">6</a></li>
							<li><a href="#">7</a></li>
							<li><a href="#">8</a></li>
							<li><a href="#">...</a></li>
							<li><a href="#" class="shangy"><span class="xia tubiao"></span></a></li>
						</ul>
					</div>
		</div>
</template>




<script>
export default{
  data () {
    return {}
  }
}
</script>




<style scoped>
 /*分页条*/
.fenye{
	text-align: center;
	padding-bottom: 100px;
}
 .fenye .fenye-list{
	padding: 15px 0;
	position: relative;
	width: 690px;
	margin:0 auto;
}
.fenye .fenye-list ul li{
	float: left;
	margin:0 7px;
}
/*取消悬浮影响*/
.fenye .fenye-list::after{
	content:"";
	display:block;
	clear:both;
}
.fenye .fenye-list ul li a{
	display: block;
	width: 48px;
	line-height: 24px;
	padding: 3px 0;
	color: #b0b0b0;
}
.fenye .fenye-list ul li a.shangy{
	height: 30px;
}
.fenye .fenye-list ul li a  span.shang{
	border-left: 1px solid #b0b0b0;
	border-bottom: 1px solid #b0b0b0;
	transform:rotate(45deg);
}
.fenye .fenye-list ul li a  span.tubiao{
	display: block;
	float: left;
	position: relative;
	width: 10px;
	height: 10px;
	top: 6px;
	left: 20px;
}
.fenye .fenye-list ul li a  span.xia{
	border-top: 1px solid #b0b0b0;
	border-right: 1px solid #b0b0b0;
	transform:rotate(45deg);
}
/*取消悬浮影响*/
.fenye .fenye-list ul li a::after{
	content:"";
	display:block;
	clear:both;
}

.fenye .fenye-list ul li a:hover{
	background: #757575;
	color: #fff;
}
.fenye .fenye-list ul li a.fenye-selected{
	background: #757575;
	color: #fff;
}
</style>